/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro';
import { Swiper, View, Input } from '@tarojs/components';
import { AtFloatLayout } from "taro-ui"

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CColumn } from '../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Toast} from '../../library/func';
import Icon from '../../project/style/icon';
import Http from '../../project/func/http/http';
import '../../library/style/patch.css';

import { Addcbtn, Cbtn, Chead, Destop, Editcunit, Ibottom, Ibottomp, Listunitone, Listunittwo, LogoLine, LogoLinep, Tabheader } from '../../project/comp';


/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Albumindex extends Component {

	constructor(props) {
        super(props);
        this.state = {
            // 资料类别
            catmap:[],
            
            active:1,
            more:false,
            album: false,
            list: [],
            item: [],
            // 获取屏幕高度
            scrollHeight: wx.getSystemInfoSync().windowHeight,
            // 相册名称
            value: null,
            // 是否为管理员
            is_master:false,
        }
    }

/******************************************************************************************
 * 生命周期
 ******************************************************************************************/
// didMount
componentDidMount(){
    this.getData()
}

// showMount
componentDidShow(){
    this.getData()
}

// 获取数据
getData = (callbcak)=> {
    // 是否为管理员
    Http.AuthOk((res)=>{
        this.setState({
            is_master:res
        })
    })
    // 取数据
    Http.Loading({
        url:'materialCate/list.php',
        success: (data)=>{
            let obj = {}
            let arr = []
            for(let v of data){
                obj = {key: v.id, name: v.set_name}
                arr.push(obj)
            }
            this.setState({
                catmap: arr,
                list: data,
                active: data[0].id,
                item: data[0].item
            })
            if(callbcak){
                callbcak();
            }	
        }
    })
}


/******************************************************************************************
 * 自定义方法
 ******************************************************************************************/

//选择tab
onChangeTab = (val) =>{
    for(let v of this.state.list){
        if(v.id == val){
            this.setState({
                item: v.item,
                album: false,
                more: false
            })
        }
    }
    this.setState({
        active:val
    })
}

// 新建相册时输入相册名称的input的value值
onInput = (e)=> {
    this.setState({
        value: e.detail.value
    })
}

//更多
more = () => {
    let more = this.state.more;
    this.setState({
        more:more?false:true,
    })
}

// onRedirect
onRedirect(url){
    wx.redirectTo({
        url: url
    })
}
    
// onNavigate
onNavigate(url){
    wx.navigateTo({
        url: url
    })
}
    
//onNavigateBack
onNavigateBack(num=1){
     wx.navigateBack({
        delta: num
     })                    
}

// 新建相册
addAlbum = ()=> {
    this.setState({
        album: true
    })
}

// 调用新建相册的接口
albumConfirm = ()=> {
    Http.post({
        url: 'materialCate/logic/add.php',
        data:{
            fk_fid: this.state.active,
            set_name: this.state.value
        },
        success:(data)=>{
            this.getData(()=>{
                Toast.success('新建成功！')
            })
            this.setState({
                album:false,
                value: null
            })
        }
    })
}

/******************************************************************************************
 * 渲染
 ******************************************************************************************/

    render() {
        // 取分类的前5个
        let catmap = [];
        this.state.catmap.forEach( ( item, i ) => {
            if(i<=4){
                catmap.push(item);
            }
        } );
        return (
            <CPage>
                {/* 顶部tab切换 */}
                <CHeader h="45" x="center" class="f1">
                    <CBetween bg="white" px='10'>
                        {catmap.map((item, index) => {
                            console.log(item)//不能去
                            return(
                                <CHand class="f03" y="center" h="45" x="center" onClick={ this.onChangeTab.bind(this, item.key) }>
                                    { this.state.active == item.key ?
                                    <CText size="16" py="10" color="#D7C361" mt="2" bb="#D7C361 6 solid">{ item.name }</CText>
                                    :
                                    <CText size="16" py="10" color='#3c3c3c'>{ item.name }</CText>
                                    }
                                </CHand>
                                
                            )
                        })}
                        <CHand class="f02" y="center" h="45" x="center" onClick={ this.more.bind(this) }>
                            <CSvg icon={Icon.down} ml="10" w='15' h='15' color='#999'></CSvg>
                        </CHand>
                    </CBetween>
                </CHeader>

                {/* 黑色遮罩层 */}
                {this.state.more == true && <View class='black' style={'height:'+ this.state.scrollHeight +'px; width:100%'} onClick={ this.more.bind(this) }></View>}
                <CContent style='height:100vh' mt='45'>

                    {/* 被隐藏的分类 */}
                    {this.state.more == true && 
                        <CRow rel>
                            <CColumn bg="#fff" bt='1 solid #e1e1e1' py='10' abs top='0' w='375' style='z-index:2'>
                                <CWrap>
                                    {this.state.catmap.map((item, index) => {
                                        return(
                                            <CHand class="w02" y="center" x="center" onClick={ this.onChangeTab.bind(this, item.key) }>
                                                <CText size="16" py="5" color='#3c3c3c'>{ item.name }</CText>
                                            </CHand>
                                        )
                                    })}
                                </CWrap>
                                {/* 如果是管理员显示 */}
                                {this.state.is_master == true &&
                                    <CLine x='right' mr='10' mb='8'>
                                        {/* 排序 */}
                                        <CButton ba='1 solid #ba9e37' ra='50' size='14' color='#ba9e37' py='2' px='10' onClick={this.onNavigate.bind(this, '/screen/album/catelist')}>设置</CButton>
                                    </CLine>
                                }
                            </CColumn>
                        </CRow>
                    }

                    {/* 分类下的相册 */}
                    {this.state.item.length != 0 && 
                        <CHand>不等于0</CHand>
                    }
                    <CBetween bg="#fff" mt="5" pb='10'>
                        {/* <CHand style="width:3%;" h="10"></CHand> */}
                        <CWrap style="width:94%;">

                            {/* 新建相册 */}
                            {this.state.is_master == true && 
                                <CHand style="width:33.3%" y="center"  x="center" pt="20"  onClick={ this.addAlbum }>
                                    <CItemY class="w1" mt="30">
                                        <CSvg icon={Icon.addtwo} w='20' h='20' color='#debf46'></CSvg>
                                        <text style="font-size:28rpx; line-height:60rpx; color:#CEB64B">新建相册</text>
                                    </CItemY>
                                </CHand>
                            }

                            {/* 循环相册 */}
                            {this.state.item.map(i => {
                                console.log('iii-----------------------', i)
                                return (
                                    <CHand style="width:33.3%" y="center"  x="center" pt="20" onClick={this.onNavigate.bind(this, '/screen/album/albumlist?fk_cid2='+i.id + '&cat_name=' + i.set_name+ '&fk_cid1='+ i.fk_fid)}>
                                        <CItemY class="w1">
                                            {i.set_image !=null ? <image style="width:180rpx; height:180rpx" src={i.set_image}/> : <CHand w='90' h='90' x='center' y='center'><CSvg icon={Icon.picture} color='#f0f0f0' w='30' h='30'></CSvg></CHand>}
                                            <text style="font-size:28rpx; line-height:60rpx; color:#555">{i.set_name}</text>
                                        </CItemY>
                                    </CHand>
                                )
                            })}
                        </CWrap>
                        <CHand style="width:3%;" h="10"></CHand>
                    </CBetween>

                </CContent>

                {/* 新建相册弹层 */}
                <AtFloatLayout
                    isOpened ={this.state.album}
                    title='新建相册'
                    // onClose={ this.handleClose } 
                >
                    <Input
                        value={this.state.value}
                        placeholder='请输入相册名称'
                        style='border-bottom:1px solid #f0f0f0; margin-top:20rpx; padding-bottom:10rpx;'
                        onInput = {this.onInput}
                    />
                    <CButton bg='#CEB64B' color='#fff' size='16' mt='30' h='35' ra='10' y='center' onClick={this.albumConfirm}>确认</CButton>
                </AtFloatLayout>
                {/* 新建相册弹层end */}

            </CPage>
        );
    }
}
